<template>
<div>



	<!-- <yd-cell-group>
        <yd-cell-item>
            <span slot="left">当前地址</span>
            <span slot="right">{{url}}</span>
        </yd-cell-item>
        
    </yd-cell-group>

	<yd-cell-group>
        <yd-cell-item arrow>
            <span slot="left">cookies</span>
            <span slot="right" >
            	<div class="btn"
			  	v-clipboard:copy="cookies"
			    v-clipboard:success="copyCookies"
			    v-clipboard:error="onErrorCookies"
			  	>复制cookies</div>
            </span>
        </yd-cell-item>
        <yd-cell-item>
            <span slot="left">{{cookies}}</span>
        </yd-cell-item>
    </yd-cell-group>


    <yd-cell-group>
        <yd-cell-item arrow>
            <span slot="left">清空个人信息</span>
            <span slot="right" @click="clearinfo" >清空</span>
        </yd-cell-item>
    </yd-cell-group> -->

    <yd-cell-group>
        <yd-cell-item >
            <span slot="left">是否支持canvas : {{isSupportCanvas}}</span>
        </yd-cell-item>
    </yd-cell-group>

    <!-- <yd-cell-group>
        <yd-cell-item arrow >
            <span slot="left">核销</span>
            <span slot="right" @click="destroy">跳转</span>
        </yd-cell-item>
    </yd-cell-group>

    <yd-cell-group>
        <yd-cell-item arrow >
            <span slot="left">首页</span>
            <span slot="right" @click="home">跳转</span>
        </yd-cell-item>
    </yd-cell-group> -->

    <!-- <yd-cell-group>
        <yd-cell-item arrow>
            <span slot="left">开始授权</span>
            <span slot="right" @click="auth" >授权</span>
        </yd-cell-item>
    </yd-cell-group> -->


    <!-- <yd-cell-group>
        <yd-cell-item arrow >
            <span slot="left">我的</span>
            <span slot="right" @click="mine">跳转</span>
        </yd-cell-item>
    </yd-cell-group> -->
			
<qrcanvas id="qrcode" :options="{
		cellSize: 8,
    data: 'options.data',
	}"></qrcanvas>

<img id="resultposter" src="#" width="245" height="245" >
<br>
---------------
<br>
<canvas width="300" id="myCanvas" height="45" v-show="false" ></canvas>
<br>
---------------
<!-- 二维码 -->


<qrcode-vue id="qrcode11" :value="value"></qrcode-vue>

<!-- <poster :options="posterdata"></poster> -->

</div>
  		
</template>

<script>

import { mapGetters } from 'vuex';
const axios = require('axios');
const Qrcanvas = require('qrcanvas-vue');
// import { QRCanvas } from 'qrcanvas-vue';

import QrcodeVue from 'qrcode.vue';

import { imgUtil, imgUtil1 } from '../../util/util';
import poster from '../util/poster';

export default {
	name: 'toolindex',
	
	data () {
		return {
		  	cookies : '',

		  	isSupportCanvas : '不支持',

		  	posterdata : {
		  		img : 'https://img.hidlq.com/image/LW0018/poster/1547533478637jAiDqBTzrmu491GG.jpg',
		  		qrcode_l : 543,
		  		qrcode_t : 1137,
		  		qrcode_size : 3,
		  		wxname_l : 30,
		  		wxname_t : 1281,
		  		wxname_size : 36,
	      		wxname_color : '#333',
	      		wxname_length : 100,
	      		wxname : '测试',
	      		data : '123123123123',
		  	},

		  	value : '11112222',

		}
	},

	components: {
		Qrcanvas,
		poster,
		QrcodeVue,
	},

	computed : {
		...mapGetters([
			'company_code', 
		]),


		url () {
			return window.location.href;
		},

	},

	methods : {
		getCookies () {
			const para = {
				fun : 'getCookies',
				requestType : 'get',
				cb : res => {
					console.log(res);
					this.cookies = res;
				}
			};

			this.$store.dispatch('update', para);
		},

		copyCookies () {
			this.$dialog.alert({'mes' : '复制成功'});
		},

		onErrorCookies () {
			this.$dialog.alert({'mes' : '无法复制cookies'});
		},

		clearinfo () {
			const para = {
				fun : 'clearinfo',
				requestType : 'get',
				cb : res => {
					console.log(res);
					this.$dialog.alert({'mes' : res});
					this.getCookies();
				}
			};

			this.$store.dispatch('update', para);
		},


		auth () {

			console.log('auth');

			const para = {
				fun : 'checkneedauthtest',
				requestType : 'get',
				cb : res => {
					console.log(res);
					if(res == '0'){
						this.$dialog.alert({'mes' : '不需要授权'});
					}else if(res == '2'){
						this.$dialog.alert({'mes' : '没有公众号'});
					}else{
						this.$dialog.alert({'mes' : JSON.stringify(res)});
					}

				}
			};

			this.$store.dispatch('update', para);
		},


		async mine () {
			// this.$router.push({ 
			// 	name: 'toolmine', 
			// 	query : { 
			// 		'company_code' : this.company_code,
			// 	},
			// })


			const config = {
				'method' : 'post',
				'url' : '/api/uc/wc/newProductService/homePage',
				'data' : {
					'company_code' : 'LW0015'
				},
				'headers' : {
					'Accept': 'application/json',
					'Content-Type': 'application/json',
				},
			};

			try {
			    const response = await axios(config);
			    console.log(response.data);
			} catch (error) {
			    console.error(error);
			}

			console.log('完成');




		},


		destroy () {
			this.$router.push({ 
				name: 'destroylogin', 
			})
		},


		home () {
			this.$router.push({ 
				name: 'home', 
				query : {
					company_code : 'LW00035'
				}
			})
		},
	},

	watch:{
	    
	},

	async mounted () {

		var canvas = document.getElementById("myCanvas");
		console.log(canvas.getContext);

		if(canvas.getContext){
			this.isSupportCanvas = '支持';
		}

		try {



			var img_poster = 'https://img.hidlq.com/image/shop/qmlogo.png';

		  	var a1 = await imgUtil(img_poster);
		  	console.log(a1);

		  	canvas.width = a1.width;
			canvas.height = a1.height;
			var context = canvas.getContext('2d');

			console.log('context');
			console.log(canvas.width);
			console.log(canvas.height);
			

			context.drawImage(a1, 0, 0, canvas.width, canvas.height);


			var canvas_qrcode = document.getElementById("qrcode");
		  	var img_qrcode = canvas_qrcode.toDataURL("image/png");
		  	console.log('img_qrcode');
		  	console.log(img_qrcode);
			var a2 = await imgUtil1(img_qrcode);
			console.log('a2');
			//const bili = a1.width / 250;
			const bili = 5;
			console.log(bili);
			context.drawImage(a2, 
				500, 
				400, 
			60 * bili, 60 * bili);

			// context.font = (18 * bili) +  "px 微软雅黑";
			// context.fillStyle = '#666';
			// context.fillText('测试文字', 
			// 	100, 
			// 	10 + (18 * (bili - 0.5)),
			// 	300 * bili);

			console.log('drawImage');

			var image = document.getElementById("resultposter");
			image.src = canvas.toDataURL("image/png");
			console.log(image);
		}catch(err){
			console.log(err);
		}
		
		//this.getCookies();
		
	},

}
</script>

<style scoped>

</style>
